<template>
  <div class="content">
    <div class="login-bg">
      <span>注册</span>
      <div class="login_content mt10">
        <p>电话号码</p>
        <div class="login_list">
          <input type="text" v-model="form.userTel">
          <i class="iconfont icon del_icon" @click="form.userTel = ''"></i>
        </div>
      </div>
      <div class="login_content">
        <p>验证码</p>
        <div class="login_list">
          <input type="text" v-model="form.tokenCode">
          <i @click="sendMsg" :style="{color: noSend?'gray':''}">{{tokenMsg}}</i>
        </div>
      </div>
      <div class="login_content">
        <p>密码(至少6位)</p>
        <div class="login_list">
          <input type="password" v-model="form.userPw">
          <i class="iconfont icon del_icon" @click="form.userPw = ''"></i>
        </div>
      </div>
      <div class="agree_xy">
        <div class="answer">
          <div class="ans1">
            <input type="radio" value="满意" name="yljs" class="radio-bg" @click="form.checked = true"/></div>
          <b @click="toProtocol">我已阅读并同意注册协议</b>
        </div>
        <div class="btn_xyb" @click="submit"></div>
      </div>
    </div>
  </div>
</template>

<script>
  import {register} from '@/api/userLogin'
  import {init} from '@/views/utils/common'

  export default {
    data() {
      return {
        form: {
          openId: '',
          userTel: '',
          userPw: '',
          tokenCode: '',
          checked: false
        },
        count: 3, //间隔函数，1秒执行
        curCount: 0, //当前剩余秒数
        interValObj: 0, //timer变量，控制时间
        tokenMsg: '获取验证码 ',
        noSend: false
      }
    },
    mounted() {
      let that = this
      init(that)
    },
    methods: {
      /**
       * 发送验证码
       */
      sendMsg() {

        if (this.noSend) {
          return;
        }

        if (!this.form.userTel) {
          this.$message({
            message: '电话号码不能为空~',
            type: 'warning'
          });
          return
        }

        if (!this.$ace.isMobilePhone(this.form.userTel)) {
          this.$message({
            message: '电话号码不合法~',
            type: 'warning'
          });
          return
        }

        //短信验证码逻辑
        let that = this;
        this.$store.dispatch('sendMsg', this.form).then((data) => {
          that.curCount = that.count;
          that.tokenMsg = that.curCount + "秒可重发";
          that.noSend = true;
          that.interValObj = window.setInterval(that.setRemainTime, 1000);
        })
      },

      /**
       * 跳转协议
       */
      toProtocol(){
        this.$router.push({path: '/userProtocol'})
      },

      /**
       * 验证码发送循环
       */
      setRemainTime() {
        if (this.curCount === 1) {
          window.clearInterval(this.interValObj);
          this.tokenMsg = '获取验证码'
          this.noSend = false;
        }
        else {
          this.curCount--;
          this.tokenMsg = this.curCount + "秒可重发"
        }
      },

      /**
       * 登录逻辑
       */
      submit() {
        let that = this;

        if (!this.form.userTel) {
          this.$message({
            message: '电话号码不能为空~',
            type: 'warning'
          });
          return
        }

        if (!this.$ace.isMobilePhone(this.form.userTel)) {
          this.$message({
            message: '电话号码不合法~',
            type: 'warning'
          });
          return
        }

        if (!this.form.tokenCode) {
          this.$message({
            message: '验证码不能为空~',
            type: 'warning'
          });
          return
        }

        if (!this.form.userPw) {
          this.$message({
            message: '密码不能为空~',
            type: 'warning'
          });
          return
        }

        if (this.form.userPw.trim().length < 6) {
          this.$message({
            message: '密码至少六位~',
            type: 'warning'
          });
          return
        }

        if(!this.form.checked){
          this.$message({
            message: '必须先同意注册协议~',
            type: 'warning'
          });
          return
        }

        register(this.form).then(() => {
          this.$message({
            message: '注册成功，即将自动登录~',
            type: 'success',
            duration: 1000,
            onClose() {
              that.$store.dispatch('userLogin', that.form).then((data) => {
                that.$router.push({path: '/userHome'})
              })
            }
          });
        })
      },
    }
  }
</script>

<style scoped>
  @import "../../assets/css/iconfont.css";
  @import "../../assets/css/login_selfcenter.css";
  @import "../../assets/css/reset.css";
</style>
